<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
</head>
<style type="text/css">
	.main_div{
		margin : 15px;
	}
</style>

<body>
<script>
	console.log('${role}');
</script>

<form class="layui-form layui-form-pane" action="" id="form_update">
	<!--先写一个隐藏标签存放ID  -->
	<input type="hidden" name="id"  value="${role.id}"/>
  <div class="layui-form-item">
    <label class="layui-form-label">用户姓名</label>
    <div class="layui-input-block">
    <!--lay-verify="required" 这个语句是自带的正则表达式，包含的意思是 该文本框不能为空(必填项) -->
      <input type="text" name="name" value="${role.name}"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户身份</label>
    <div class="layui-input-block">
      <input type="text" name="sn" value="${role.sn}" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
	<label class="layui-form-label">权限</label>
	<div class="layui-input-block" id="permissions" name="permissions">
   </div>
  
  <!--修改按钮开始 -->
  <div class="layui-form-item">
    <input class="layui-btn" onclick="submitForm()" lay-filter="demo2" value="修改" />
  </div>
</form>
  <!--修改按钮结束 -->
          
<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/static/common/mylayer.js"></script>
<script src="${ctx}/static/common/util.js"></script>
<script src="${ctx}/static/lib/layui/layui.js"></script>
<script src="${ctx}/static/lib/kindeditor/kindeditor.js"></script>
<script src="${ctx}/static/lib/kindeditor/lang/zh_CN.js"></script>


<script>
	layui.config({
	    base : '${ctx}/static/lib/'
	  }).extend({
	    selectM: './layui_extends/selectM'
	  }).use(['form','upload','selectM'],function(){
	  	var form = layui.form;
	  	var upload = layui.upload;
	  	var selectM = layui.selectM;
	 
	  	$.ajax({
	  		url : '${ctx}/role/selectRoleAndPermissions.action',
	  		type:'POST',
	  		data:{"roleId":"${role.id}"},
	  		dataType:'json',
	  		success:function(resp) {
	  			if (resp.code == util.SUCCESS) {
	  				mylayer.success(resp.msg);
	  				
	  				var role = resp.data["role"];
	  				var allPermissions = resp.data['allPermissions'];
	  				var selectIds = resp.data['selectIds'];
	  				$("#id").val(role.id);
	  				$("#name").val(role.name);
	  				$("#sn").val(role.sn);
	  				
					 //多选标签-基本配置
				    var tagIns = selectM({
				      //元素容器【必填】
				      elem: '#permissions'
				      //候选数据【必填】
				      ,data: allPermissions
				      //默认值
				      ,selected: selectIds
				   	  // 默认最多选中5个
				      ,max : 100
				    });
	  			} else{
	  				mylayer.errorMsg(resp.msg);
	  			}
	  		}
	  	}); 
	  });
	
	
	//ajax方式提交form表单
	function submitForm() {
		$.ajax({
			url:"${ctx}/role/update.action",
			//data 提交 ,serialize 序列化
			data:$('#form_update').serialize(),
			type:"post",
			dataType:"json",
			success:function(resp) {
				if(resp.code == util.SUCCESS) {
					mylayer.confirm("修改成功，是否跳转到列表界面？","${ctx}/role/getrole.action");
				}
				else{
					mylayer.errorMsg(resp.msg);
				}
			}
			
		});
	}
	


</script>

</body>
</html>